<template>
  <div class="report">
    <div class="report-title">
      <el-select id="id-datareport-operatorAccount-changeOption"
                 v-model="option" size="mini" placeholder="请选择运营人" @change="changeOption">
          <el-option v-for="item in optionsList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <div style="color: black" class="report-title-date" :style="{width:index == 0 ? '15%' : 'calc(80%/8)'}"
           v-for="(item,index) in list.reporttime" :key="index" v-text="item">
      </div>
    </div>
    <div class="report_border">
      <!-- 运营人层级 -->
      <div class="">
        运营人: {{optionName}}
      </div>
      <!--订单层级-->
      <div v-for="(item,index) in lists" class="report_border">
        <div style="border: 1px solid #f0f0f0">
          <div style="border: 1px solid #f0f0f0">订单:{{ index }}
            <!-- 媒体层级 -->
            <div>
              <!--账户层级-->
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {selectoperator, selectDate, getOperatorList} from "@/api/business/account";

export default {
  name: "operatorAccount",
  data() {
    return {
      lists: {},
      repordata: [],
      option:'',//运营人id
      optionName:'',//运营人名称
      optionsList: [],
      list: []
    }
  },
  created() {
    getOperatorList().then((res)=>{
      console.log(res)
      this.optionsList=res.data
    })
    // selectoperator("1420285097983565824").then((res)=>{
    //   console.log(res)
    //   this.repordata=res.data.data
    //   for(var key in this.repordata){
    //     var  list=[]
    //     var  list1=[]
    //     var  list2=[]
    //     var  list3=[]
    //     this.repordata[key].map(res=>{
    //       if(res.platform === "bigo"){
    //         list2.push(res)
    //       }
    //       if(res.platform==="facebook"){
    //         list.push(res)
    //       }
    //       if(res.platform === "tiktok"){
    //         list1.push(res)
    //       }
    //       if(res.platform==="google"){
    //         list3.push(res)
    //       }
    //     })
    //     this.lists[key]={
    //       bigo: list2,
    //       facebook: list,
    //       tiktok:list1,
    //       google: list3
    //     }
    //   }
    //   console.log(this.lists)
    // })

    // selectDate("1420285097983565824").then((res)=>{
    //   console.log(res.data)
    //   this.list=res.data
    // })
  },
  mounted(){

  },

  methods: {
    //修改运营人
    changeOption(v){
      console.log(v)
      this.optionsList.map( item =>{
        if(item.id === v){
          this.optionName = item.name
        }
      })
      console.log(this.optionName)
    },
  }
}
</script>

<style scoped lang="scss">
.report-title {
  background-color: #D0E7FF;
  height: 40px;
  display: flex;
  align-items: center;
  line-height: 20px;
  color: white;
  padding: 0 20px;
}

.report {
  font-size: 14px;
  line-height: 28px;
  width: 100%;
}

.report-title-date {
  text-align: center;
}

.cost-offer-border {
  text-align: center;
  width: calc(80% / 8);
}

el-tabs {
  height: 200px;
}

.red {
  background-color: red;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
$border : solid 1px #555;
.report_border{
  border: $border;
}
</style>
